<script lang="ts" setup>
  import {
    useAutoLoading,
    useBtnRequest,
    useAutoRequest,
  } from '@/hooks/arco/useAutoLoading';

  const fetchRequest = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, 3000);
    });
  };

  const [loading1, run] = useAutoLoading();

  const [loading2, submit] = useAutoRequest(fetchRequest, {
    onSuccess(data) {
      console.log('操作成功');
    },
  });

  const btnReq = useBtnRequest({
    apiFun: fetchRequest,
    onSuccess(data) {
      console.log('操作成功');
    },
  });

  const onClick1 = () => {
    run(fetchRequest());
  };

  const onClick2 = () => {
    submit();
  };
</script>

<template>
  <div>
    <a-button :loading="loading1" @click="onClick1">Btn1</a-button>
    <a-button :loading="loading2" @click="onClick2">Btn2</a-button>
    <a-button v-bind="btnReq">Btn3</a-button>
  </div>
</template>

<style></style>
